<!--TODO 添加题号 难度 题目标签等 题目与题号左对齐  答案左对齐-->
<template>
  <div class="paper-body">
    <el-row>
      <el-col>
        <el-container>
          <el-header>
            <el-page-header @back="goBack" content="问答系统" class="back"/>
          </el-header>
          <el-row>
            <el-col :span="4" style="border: 1px solid rgb(228, 228, 228);">
              <el-collapse accordion>
                <el-collapse-item :name="item.bankName" v-for="(item, index) in questionBankOfQuestion" :key="index">
                  <template slot="title">
                    <i class="el-icon-s-order" style="margin-right: 10px"></i>{{item.bankName}}
                  </template>
                  <el-row v-for="(question, index) in item.questionList" :key="index">第{{index + 1}}题:{{question}}</el-row>
                </el-collapse-item>
              </el-collapse>
            </el-col>
            <el-col :span="15" style="border: 1px solid rgb(228, 228, 228);">
              <el-container>
                <el-main>
                  <el-container>
                    <el-header class="paper-header-title" style="height: 40px">
                      模拟练习测试卷
                    </el-header>
                    <el-main>
                      <el-row class="paper-problem-textarea">
                        <div class="paper-problem">
                          题目
                          <p class="paper-problem-p">{{curQuestion.problem}}</p>
                        </div>
                      </el-row>
                      <el-divider><i class="el-icon-reading"/></el-divider>
                      <el-row class="paper-solution-textarea">
                        <div class="paper-solution">
                          答案
                          <!-- TODO 增加element的折叠动画 -->
                          <div class="paper-solution-div" :class="{paperSolutionDivMask: hide}">
                            <p :class="{solutionHide: hide}">{{curQuestion.solution}}</p>
                          </div>
                        </div>
                        <el-button v-if="!hide" @click="hideSolution" style="margin-top: 15px">隐藏答案</el-button>
                        <el-button v-else @click="showSolution" style="margin-top: 15px">显示答案</el-button>
                      </el-row>
                      <el-row class="paper-button-area">
                        <el-col :span="5">
                          <el-button
                              type="primary"
                              @click="preQuestion"
                              :disabled="noPre">上一题</el-button></el-col>
                        <el-col :span="5">
                          <el-button @click="correct"
                                     :class="{buttonStyleAreaFocus: light.correctLight}">正确</el-button></el-col>
                        <el-col :span="4">
                          <el-button @click="uncertain"
                                     :class="{buttonStyleAreaFocus: light.uncertainLight}">不确定</el-button></el-col>
                        <el-col :span="5">
                          <el-button @click="mistake"
                                     :class="{buttonStyleAreaFocus: light.mistakeLight}">错误</el-button></el-col>
                        <el-col :span="5">
                          <el-button
                              v-if="!noNext"
                              type="primary"
                              @click="nextQuestion"
                              :disabled="noNext">下一题</el-button>
                          <el-button
                              v-else
                              type="success"
                              @click="submitPaper"
                          >交卷</el-button>
                        </el-col>
                      </el-row>
                    </el-main>
                  </el-container>
                </el-main>
              </el-container>
            </el-col>
            <el-col :span="5" style="border-top: 1px solid rgb(228, 228, 228);">
              <el-container>
                <el-main>
                  <el-row>模拟练习测试卷</el-row>
                  <el-row>
                    <el-button class="button-style-area"
                               @click="jumpIndex(item - 1)"
                               :class="{buttonStyleAreaFocus: index === item - 1}"
                               :key="item"
                               v-for="item in questionList.length">{{item}}</el-button>
                  </el-row>
                </el-main>
              </el-container>
            </el-col>
          </el-row>
        </el-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { gy_axios } from '@/plugins/axios'
import { Message } from 'element-ui'

export default {
  name: "paper",
  created() {
    this.noPre = this.index === 0
    this.noNext = this.index === this.questionList.length - 1
    this.curQuestion = this.questionList[this.index]
    this.getQuestionBankOfQuestion()
  },
  data() {
    const module = '/paper'
    return {
      uri: {
        getQuestionBankOfQuestion: '/questionBank/questionBelongBank',
        submit: module + '/submitPaper'
      },
      bankIds: this.$route.query.bankIds,
      curQuestion: '',
      questionList: this.$store.getters.GET_QUESTION_LIST,
      index: 0,
      noPre: true,
      noNext: true,
      hide: true,
      questionBankOfQuestion: [],
      light: {
        correctLight: false,
        uncertainLight: false,
        mistakeLight: false
      }
    }
  },
  methods: {
    goBack() {
      this.$confirm('是否退出此次答题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.back();
      })
    },
    showSolution() {
      this.hide = false
    },
    hideSolution() {
      this.hide = true
    },
    preQuestion() {
      this.curQuestion = this.questionList[--this.index]
      this.noPre = this.index === 0
      this.noNext = this.index === this.questionList.length - 1
      this.hide = true
      this.light.correctLight = this.questionList[this.index].correctCount === 1
      this.light.uncertainLight = this.questionList[this.index].uncertainCount === 1
      this.light.mistakeLight = this.questionList[this.index].mistakeCount === 1
    },
    nextQuestion() {
      this.curQuestion = this.questionList[++this.index]
      this.noPre = this.index === 0
      this.noNext = this.index === this.questionList.length - 1
      this.hide = true
      this.light.correctLight = this.questionList[this.index].correctCount === 1
      this.light.uncertainLight = this.questionList[this.index].uncertainCount === 1
      this.light.mistakeLight = this.questionList[this.index].mistakeCount === 1
    },
    correct() {
      this.questionList[this.index].correctCount = 1
      this.questionList[this.index].uncertainCount = 0
      this.questionList[this.index].mistakeCount = 0
      this.light.correctLight = true
      this.light.uncertainLight = false
      this.light.mistakeLight = false
    },
    uncertain() {
      this.questionList[this.index].correctCount = 0
      this.questionList[this.index].uncertainCount = 1
      this.questionList[this.index].mistakeCount = 0
      this.light.correctLight = false
      this.light.uncertainLight = true
      this.light.mistakeLight = false
    },
    mistake() {
      this.questionList[this.index].correctCount = 0
      this.questionList[this.index].uncertainCount = 0
      this.questionList[this.index].mistakeCount = 1
      this.light.correctLight = false
      this.light.uncertainLight = false
      this.light.mistakeLight = true
    },
    jumpIndex(index) {
      this.index = index
      this.curQuestion = this.questionList[index]
      this.noPre = index === 0
      this.noNext = index === this.questionList.length - 1
      this.hide = true
      this.light.correctLight = this.questionList[this.index].correctCount === 1
      this.light.uncertainLight = this.questionList[this.index].uncertainCount === 1
      this.light.mistakeLight = this.questionList[this.index].mistakeCount === 1
    },
    getQuestionBankOfQuestion() {
      const params = {
        questionList: this.questionList,
        bankIdList: this.bankIds
      }
      if (!(params.bankIdList instanceof Array)) {
        params.bankIdList = [params.bankIdList]
      }
      for (const item in params.questionList) {
        delete params.questionList[item].difficulty
      }
      gy_axios.post(this.uri.getQuestionBankOfQuestion,
          JSON.stringify(params),
          {headers: {'Content-Type': 'application/json'}})
      .then(response => {
        if (response.data.code === 200) {
          this.questionBankOfQuestion = response.data.data
        } else {
          Message.error(response.data.message)
        }
      })
    },
    submitPaper() {
      this.$confirm('是否现在交卷?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          userId: this.$store.getters.GET_ACCOUNT.id,
          paperDataList: this.questionList
        }
        gy_axios.put(this.uri.submit,
            JSON.stringify(params),
            {headers: {'Content-Type': 'application/json'}})
            .then(response => {
              if (response.data.code === 200) {
                Message.success('交卷成功')
                this.$router.push('/answer')
              } else {
                Message.error(response.data.message)
              }
            })
      })
    }
  }
}
</script>

<style scoped lang="less">
.paper-body {
  padding: 5px 10px 20px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  background: white;
  .back {
    margin-bottom: 5px;
    line-height: 60px;
  }
  .paper-header-title {
    text-align: center;
    font-size: 30px;
    font-family: 黑体;
  }
  .paper-problem-textarea {
    text-align: center;
    padding: 20px 50px;
    .paper-problem {
      min-height: 100px;
      .paper-problem-p {
        padding: 20px;
        margin-top: 30px;
        margin-left: 20%;
        width: 60%;
        border: 2px solid #817777;
      }
    }
  }
  .paper-solution-textarea {
    text-align: center;
    padding: 50px;
    .paper-solution {
      min-height: 200px;
      .paper-solution-div {
        padding: 20px;
        min-height: 50px;
        margin-top: 30px;
        margin-left: 20%;
        width: 60%;
        border: 2px dashed #817777;
        .solutionHide {
          display: none;
        }
      }
      .paperSolutionDivMask {
        background: rgba(0, 0, 0, 0.1);
      }
    }
  }
  .paper-button-area {
    text-align: center;
    padding: 20px 50px;
    .buttonStyleAreaFocus {
      color: #409EFF;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
  }
  .button-style-area {
    width: 58px;
    margin-right: 10px;
    margin-top: 5px;
  }
  .buttonStyleAreaFocus {
    color: #409EFF;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
  .el-button + .el-button {
    margin-left: 0;
  }
}
</style>